<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 选择模式 -->
			<pj-demo title="选择模式">
				<view class="wrapper">
					<pure-radio-group v-model="type">
						<pure-radio
							:label="item.label"
							:value="item.value"
							v-for="item in typeOptions"
							:key="item.value"
						></pure-radio>
					</pure-radio-group>
				</view>
			</pj-demo>

			<!-- 切换模式 -->
			<pj-demo title="切换模式">
				<view class="wrapper">
					<pure-radio-group v-model="mode">
						<pure-radio
							:label="item.label"
							:value="item.value"
							v-for="item in modeOptions"
							:key="item.value"
						></pure-radio>
					</pure-radio-group>
				</view>
			</pj-demo>

			<!-- 一周开始日 -->
			<pj-demo title="一周开始日">
				<view class="wrapper">
					<pure-radio-group v-model="firstDayOfWeek">
						<pure-radio
							:label="item.label"
							:value="item.value"
							v-for="item in firstDayOfWeekOptions"
							:key="item.value"
						></pure-radio>
					</pure-radio-group>
				</view>
			</pj-demo>

			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<view class="container">
					<pure-calendar
						:select-type="type"
						:switch-mode="mode"
						:week-start="firstDayOfWeek"
						@onSelect="onSelect"
					></pure-calendar>
				</view>
			</pj-demo>

			<!-- 禁用指定日期 -->
			<pj-demo title="禁用指定日期">
				<view class="container">
					<pure-calendar
						:select-type="type"
						:switch-mode="mode"
						:week-start="firstDayOfWeek"
						:disabled-dates="disabledDates"
						@onSelect="onSelect"
					></pure-calendar>
				</view>
			</pj-demo>

			<!-- 设置默认选中日期 -->
			<pj-demo title="设置默认选中日期">
				<view class="container">
					<pure-calendar
						:select-type="type"
						:switch-mode="mode"
						:week-start="firstDayOfWeek"
						:default-dates="defaultDates"
						@onSelect="onSelect"
					></pure-calendar>
				</view>
			</pj-demo>

			<!-- 格式化显示文本 -->
			<!-- #ifndef MP -->
			<pj-demo
				title="格式化显示文本"
				desc="小程序不支持循环slot"
			>
				<view class="container">
					<pure-calendar
						:select-type="type"
						:switch-mode="mode"
						:week-start="firstDayOfWeek"
						@onSelect="onSelect"
					>
						<template #default="{ data: day }">
							<view class="item">
								<text class="day">{{ day.day }}日 </text>
								<text class="month">{{ day.month + 1 }}月 </text>
							</view>
						</template>
					</pure-calendar>
				</view>
			</pj-demo>
			<!-- #endif -->

			<!-- 结合弹窗使用 -->
			<pj-demo title="结合弹窗使用">
				<pure-cell
					title="选择日期"
					show-arrow
					desc="点击打开弹窗"
					@onClick="show = true"
				></pure-cell>
				<pure-popup
					:show="show"
					direction="bottom"
					@onClose="show = false"
				>
					<pure-calendar
						:select-type="type"
						:switch-mode="mode"
						:week-start="firstDayOfWeek"
						@onSelect="onSelect"
					></pure-calendar>
				</pure-popup>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref, computed } from "vue";

	// 选择模式
	const type = ref("single");
	const typeOptions = [
		{
			label: "选择单个日期",
			value: "single"
		},
		{
			label: "选择多个日期",
			value: "multiple"
		},
		{
			label: "选择日期区间",
			value: "range"
		}
	];

	// 切换模式
	const mode = ref("year-month");
	const modeOptions = [
		{
			label: "无",
			value: "none"
		},
		{
			label: "按月切换",
			value: "month"
		},
		{
			label: "年月切换",
			value: "year-month"
		}
	];

	// 一周开始日
	const firstDayOfWeek = ref(0);
	const firstDayOfWeekOptions = [
		{
			label: "周一",
			value: 1
		},
		{
			label: "周日",
			value: 0
		}
	];

	// 禁用的日期
	const disabledDates = computed(() => {
		const arr = [];
		const date = new Date();

		for (let i = 0; i < 10; i += 2) {
			arr.push(new Date(date.getFullYear(), date.getMonth(), date.getDate() + i));
		}

		return arr;
	});

	// 默认选中的日期
	const defaultDates = computed(() => {
		const arr = [];
		const date = new Date();

		// 选择单个日期
		if (type.value === "single") {
			arr.push(new Date());
		}

		// 选择多个日期
		if (type.value === "multiple") {
			for (let i = 0; i < 10; i += 2) {
				arr.push(new Date(date.getFullYear(), date.getMonth(), date.getDate() + i));
			}
		}

		// 选择日期区间
		if (type.value === "range") {
			arr.push(date);
			arr.push(new Date(date.getFullYear(), date.getMonth(), date.getDate() + 9));
		}

		return arr;
	});

	// 弹窗
	const show = ref(false);

	// 选择事件
	function onSelect(dates) {
		uni.showToast({
			title: "选择了日期，打开控制台查看选择的日期数据",
			icon: "none",
			mask: true
		});

		// 选择单个日期
		if (type.value === "single") {
			console.log("选择单个日期 ->", dates);
		}

		// 选择多个日期
		if (type.value === "multiple") {
			console.log("选择多个日期 ->", dates);
		}

		// 选择日期区间
		if (type.value === "range") {
			console.log("选择日期区间 ->", dates[0], dates[1]);
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		background: var(--pure-background-default);
		border-radius: var(--pure-radius-default);
		padding: 16px;
	}

	.container {
		background: var(--pure-background-default);
		border-radius: var(--pure-radius-default);
	}

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.month {
			font-size: var(--pure-font-size-mini);
			opacity: var(--pure-opacity-hover);
		}
	}
</style>
